import React, { Component } from "react"
import  { Link } from 'react-router'
import { Carousel, Row, Col } from 'antd'
import fetchData from '../../util/fetch'
import erwei from '../../img/erwei.png'
import telImg from '../../img/tel.png'
import addressImg from '../../img/address.png'
import emailImg from '../../img/email.png';
import MapHtml from '../common/map';
import Swiper from 'react-id-swiper'


class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isAutoplay: true,
            expertInfo: {
                img2Url: '',
                title: '',
                summary: '',
                content: '',
                expertId: ''
            },
            showActicityLeft: true,
            showActicityRight: false,
            contentChange: 'contentChangeClick',
            contentNoChange: 'contentChangeNoClick',
            mapVisible: false,
            banner: [],
            expertDetail: [],
            expertItem: 0,
            pageIndex: 0,
            activityData: [],
            classList: {},//11精致服务
            list: [],//1-2-1-1	活动招募列表
            arr: [],//1-2-2-1	新闻动态列表
            expertTeam: {},//专家团队
            activityTitle: {},//活动咨询
            activityList1: [],//1-2-1	活动招募
            activityList2: [],//1-2-2  新闻动态
            real: {},//1-3 3D实景图
            branch: {},//1-4 hibaby直营店
            branchlist: [],//hibaby直营店列表
            realWheel: [], //12,3D实景轮播图
        }
    }

    //banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
    data(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            this.setState({
                banner: data
            })
        }.bind(this))
    }

    //11精致服务
    classData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            this.setState({
                classList: data
            })
        }.bind(this))
    }

    //3D实景轮播图
    realWheelData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            this.setState({
                realWheel: data
            })
        }.bind(this))
    }


    //1-1-1 专家团队列表
    expertData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            this.setState({
                expertDetail: data,
                expertInfo: data.length != 0 && data[0]

            })
        }.bind(this))
    }

    getPlaceData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            this.setState({
                branchlist: data
            })
        }.bind(this))
    }


    componentDidUpdate(){
        if ($('.swiper-container')[1]) {
            const expertSwipe = $('.swiper-container')[1].swiper;
            console.log('expertSwipe', expertSwipe);
            $('.wheelExpert').on('mouseenter', function() {
                expertSwipe.stopAutoplay();
            })

            $('.wheelExpert').on('mouseleave', function() {
                expertSwipe.startAutoplay();
            })
        }
    }

    renderImgs = () => {
        let { banner } = this.state;
        let bannerNum = [];
        if (!banner || banner.length == 0) {
            return null;
        }
        else {
            return (
				<Carousel autoplay={true} speed={800} dots={true}>
                    {bannerNum = banner.map(val => {
                            return (<li className="item"><img alt="" src={val}/></li>)
                        }
                    )}
				</Carousel>
            )
        }
    }


    activityList() {
        let { list, showActicityLeft, activityList1 } = this.state;
        let imgList = list.slice(0, 3);
        let renderactivity = []
        let moreBlock = [];
        if (!imgList || imgList.length == 0) {
            return null;
        } else {
            for (let i = 0; i < imgList.length; i++) {
                if (i < 4) {
                    renderactivity.push(
						<Col span={6}>
							<Link to={`/detail?id=${imgList[i].id}`} key={i}>
								<img src={imgList[i].img2Url}/>
								<p>
                                    {imgList[i].title}
								</p>
							</Link>
						</Col>)
                } else {
                    break;
                }
            }

            if (imgList.length >  3 || true) {
                moreBlock.push(<Col span={6}>
					<Link to="/activityRecruit">
						<img src={activityList1 ? activityList1.img1Url : null} style={{ height: '360px', width:'240px' }}/>
						<p className="no-hover"><a href='/activityRecruit'><span className="more">MORE+</span></a></p>
					</Link>
				</Col>)
            }
            return (
				<Row className="activityTabBox" gutter={16} style={{ 'display': showActicityLeft ? 'block' : 'none' }}>
                    {renderactivity}
                    {moreBlock}
				</Row>
            )
        }
    }

    NewsList() {
        let { arr, showActicityRight,activityList2 } = this.state;
        let arrList = arr.slice(0, 3)
        let renderactivity = [];
        let moreBlock = [];
        if (!arrList || arrList.length == 0) {
            return null;
        } else {
            for (let i = 0; i < arrList.length; i++) {
                if (i < 4) {
                    renderactivity.push(
						<Col span={6}>
							<Link to={`/detail?id=${arrList[i].id}`} key={i}>
								<img src={arrList[i].img2Url}/>
								<p>
                                    {arrList[i].title}
								</p>
							</Link>
						</Col>)
                } else {
                    break;
                }
            }
            if (arrList.length > 3 || true) {
                moreBlock.push(<Col span={6}>
					<Link to="/activityDetail">
						<img src={activityList2 ? activityList2.img1Url : null} />
						<p className="no-hover"><a href='/activityDetail'><span className="more">MORE+</span></a></p>
					</Link>
				</Col>)
            }
            return (
				<Row className="activityTabBox" gutter={16} style={{ 'display': showActicityRight ? 'block' : 'none' }}>
                    {renderactivity}
                    {moreBlock}
				</Row>
            )
        }

    }

    showMap = () => {

        this.setState({
            mapVisible: true
        });
    }

    hideMap = () => {
        this.setState({
            mapVisible: false
        });
    }

    showActicityLeft = () => {
        this.setState({
            showActicityLeft: true,
            showActicityRight: false,
            contentChange: 'contentChangeClick',
            contentNoChange: 'contentChangeNoClick'
        })
    }

    hideActicityLeft = () => {
        this.setState({
            showActicityLeft: false,
            showActicityRight: true,
            contentChange: 'contentChangeNoClick',
            contentNoChange: 'contentChangeClick'
        })
    }

    changeExpertInfo = (swiper) => {
        const activeIndex = swiper.activeIndex;
        const { expertDetail } = this.state;
        const length = expertDetail.length;
        //做下面的校验是为了保证k值就是林轮播图当前显示的第一个的k值
        // let k = activeIndex - length;
        let k = activeIndex % length;
        // k = (k == length ? 0 : k == -1 ? length - 1 : k)
        // console.log('kkk>>', length, k, expertDetail);
        $('.expert-introduce').fadeOut(10).fadeIn(2000);
        this.setState({
            expertInfo: expertDetail[k]
        })

    }



    render() {
        let { isAutoplay, realWheel, expertInfo, banner, showActicityLeft, expertDetail, contentChange, contentNoChange, showActicityRight, branchlist } = this.state;
        const expertClickHandler = (swiper) => {
            // console.log('clickindex>>', swiper.clickedIndex);
            // console.log('activeindex>>', swiper.activeIndex);
            const activeIndex = swiper.clickedIndex;
            if (typeof activeIndex !== 'number') {
                return;
            }
            $('.expert-introduce').fadeOut(10);
            const { expertDetail } = this.state;
            const length = expertDetail.length;
            //做下面的校验是为了保证k值就是林轮播图当前显示的第一个的k值
            let k = activeIndex % length;
            const _that = this;
            setTimeout(function () {
                _that.setState({
                    expertInfo: expertDetail[k]
                })
            }, 300)
            $('.expert-introduce').fadeIn(2000);
        }
        const params = {
            pagination: '.swiper-pagination',
            autoplay: 4500,
            loop: true,
            slidesPerView: 'auto',
            slidesPerGroup: 1,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            autoplayDisableOnInteraction: false,
            runCallbacksOnInit: true
        }
        const expertParams = {
            autoplay: 4500,
            loop: isAutoplay,
            slidesPerView: 'auto',
            slidesPerGroup: 1,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            autoplayDisableOnInteraction: false,
            runCallbacksOnInit: true,
            onClick: expertClickHandler,
        }

        const branchlistParams = {
            autoplay: 4500,
            loop: true,
            slidesPerView: 7
        }


        return (
			<div className="home">
				<div className="home-content home-expert">
					<h2>{this.state.expertTeam ? this.state.expertTeam.title : null}</h2>
					<div className="expert-introduce">
						<img className="expert-picture" src={expertInfo.img1Url ? expertInfo.img1Url : null}/>
						<div className="expert-content">
							<h3>{expertInfo.title}</h3>
							<p className="expert-position">{expertInfo.summary}</p>
							<h4>
                                {/*<p>团队简介：</p>*/}
								<div dangerouslySetInnerHTML={{ __html: expertInfo.content }}></div>
							</h4>
						</div>
						<a href='/service/expertTeam/ourTeam'><span className="more">MORE+</span></a>
					</div>
					<div className="wheelExpert">
                        {
                            expertDetail.length != 0 &&
							<Swiper {...expertParams} onSlideChangeStart={this.changeExpertInfo}>{
                                expertDetail.map((v, k) => {
                                    return (
										<div key={k}
											 className="wheelContent"
											 onClick={() => {
                                                 this.setState({
                                                     expertInfo: expertDetail[k]
                                                 })
                                             }}
										>
											<img src={v.img2Url} alt=""/>
											<div className="cover"></div>
											<p>{v.title}</p>
										</div>
                                    )
                                })}
							</Swiper>
                        }
					</div>
				</div>
				<div className="bg-box">
					< div
						className="home-content home-active">
						< h2 > { this.state.activityTitle ? this.state.activityTitle.title : null
                        }</h2>
						<Row className="contentChange">
							<Col span={12} className={contentChange}
								 onClick={this.showActicityLeft}>
                                {this.state.activityList1 ? this.state.activityList1.title : null}
							</Col>
							<Col span={12} className={contentNoChange}
								 onClick={this.hideActicityLeft}>
                                {this.state.activityList2 ? this.state.activityList2.title : null}
							</Col>
						</Row>
                        {this.activityList()}
                        {this.NewsList()}
					</div>
				</div>


				<div className="home3D home-content">
					<h2>{this.state.real ? this.state.real.title : null}</h2>

                    {
                        realWheel.length != 0 && <Swiper {...params}>
                            {
                                realWheel.map((v, k) => {
                                    return (
										<img src={v.imgUrl} key={k} alt="实景照片"/>
                                    )
                                })
                            }
						</Swiper>
                    }
				</div>
				<div className="bg-box">
					<div className="home-content home-contact">
						<h2>联系我们 Contact us</h2>
						<img className="contact-erwei" src={erwei} alt=""/>
						<Row className="contact-box">
							<Col span={8}>
								<img src={telImg} alt=""/>
								<p>+86(0532)55728887</p>
							</Col>
							<Col span={8}>
								<img src={addressImg}/>
								<p>青岛市崂山区海川路3号前楼1层</p>
							</Col>
							<Col span={8}>
								<img src={emailImg}/>
								<p>hibaby@hbbcare.com</p>
							</Col>
						</Row>
						<Link onClick={this.showMap.bind(this)}><span className="map">MAP</span></Link>
					</div>
				</div>
				<MapHtml visible={this.state.mapVisible} handleHide={this.hideMap.bind(this)}/>
			</div>


        )
    }
}
export default Home;
